<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible="this.visible"
    :title="$t('customer.chooseCustomer')"
    width="60%"
    :append-to-body="true"
    top="10px"
    @close="cancel"
  >
    <el-card
      class="fty-card"
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="form.pageSize"
      :total="rows"
      :current-page="form.pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form ref="form" inline :model="form" label-width="80px">
        <el-form-item>
          <el-input
            v-model="form.customerName"
            :placeholder="$t('customer.customerName')"
            size="mini"
            clearable
            :maxlength="32"
            @blur="() => (form.customerName = form.customerName.trim())"
            @keyup.enter.native="search"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.contacts"
            :placeholder="$t('customer.contacts')"
            size="mini"
            clearable
            :maxlength="32"
            @blur="() => (form.contacts = form.contacts.trim())"
            @keyup.enter.native="search"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.email"
            :placeholder="$t('customer.email')"
            size="mini"
            clearable
            :maxlength="32"
            @blur="() => (form.email = form.email.trim())"
            @keyup.enter.native="search"
          />
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-input v-model="form.address" :placeholder="$t('customer.address')" size="mini" clearable />-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-select
            v-model="form.isOversea"
            :placeholder="$t('customer.customerBelongs')"
            size="mini"
            clearable
          >
            <el-option :label="$t('customer.domestic')" value="0" />
            <el-option :label="$t('customer.oversea')" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="search"
          />
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList">
        <el-table-column
          prop="operatorName"
          header-align="center"
          align="center"
          :label="''"
          width="80"
        >
          <template v-slot="scope">
            <el-radio
              v-model="selectCustomerCode"
              :label="scope.row.customerCode"
              @change="selectCustomer(scope.row)"
              >{{ '' }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="customerShortName"
          header-align="center"
          align="center"
          width="120"
          :label="$t('customer.customerShortName')"
        />
        <el-table-column
          prop="customerName"
          header-align="center"
          align="center"
          width="200"
          :label="$t('customer.customerName')"
        />
        <el-table-column
          prop="contacts"
          header-align="center"
          align="center"
          :label="$t('customer.contacts')"
        />
        <el-table-column
          prop="email"
          header-align="center"
          align="center"
          :label="$t('customer.email')"
        />
        <el-table-column
          prop="address"
          header-align="center"
          align="center"
          :label="$t('customer.address')"
        />
      </el-table>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">{{
        $t('common.cancel')
      }}</el-button>
      <el-button type="primary" size="small" @click="confirm">{{
        $t('common.confirm')
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getOaCustomerList } from '@/api/operator.js'
export default {
  data() {
    return {
      visible: false,
      dataListLoading: false,
      dataList: [],
      rows: 0,
      selectCustomerCode: '',
      selectedCustomer: null,
      form: {
        pageNo: 1,
        pageSize: 8,
        email: '',
        customerName: '',
        contacts: '',
        address: '',
        isOversea: ''
      }
    }
  },
  created() {
    this.levelList = this.$t('operator.level_list')
  },
  methods: {
    cancel() {
      // this.form = null
      // this.selectedCustomer = null
      // this.selectCustomerCode = null
      // this.dataList = null
      this.visible = false
    },
    init() {
      this.visible = true
      this.getOaCustomer()
    },
    getOaCustomer() {
      this.dataListLoading = true
      getOaCustomerList(this.form)
        .then((res) => {
          this.dataList = res.customerEntities
          this.rows = res.total
          this.dataListLoading = false
        })
        .catch((err) => {
          this.$confirmError(err)
        })
        .finally(() => {
          this.dataListLoading = false
        })
    },
    search() {
      this.form.pageNo = 1
      this.getOaCustomer()
    },
    // 当前页
    currentChangeHandle(val) {
      this.form.pageNo = val
      this.getOaCustomer()
    },
    selectCustomer(row) {
      this.selectedCustomer = row
    },
    confirm() {
      if (!this.selectedCustomer) {
        this.$message({
          type: 'warning',
          message: this.$t('customer.selectCustomerTip'),
          duration: 2000
        })
        return
      }
      this.cancel()
      this.$emit('close', this.selectedCustomer)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-dialog {
  height: 78vh;
  overflow: auto;
}
</style>
